<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>手机端</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body, html {
      margin: 0;
      height: 100%;
      overglow: hidden;
      user-select: none;
    }
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    .button {
      width: 250px;
      height: 250px;
      background-color: #ab3535;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 60px;
      cursor: pointer;
      transition: all 300ms ease-in-out;
    }

    .button.active {
      background-color: #11ae27;
    }
  </style>

</head>

<body>
  <div id="join-room-wrap">
    <div class="px-3 pt-3 d-flex align-items-center">
      <div class="flex-fill">
        <input type="text"  class="form-control" name="room" placeholder="请输入PC上显示的房间号" />
      </div>
      <button type="button" class="btn btn-primary ms-2" onclick="joinRoom()">进入房间</button>
    </div>
  </div>

  <div class="px-3 pt-3" id="joined-room-wrap" style="display: none">
    房间号：<span id="room"></span>
  </div>

  <hr />
  <div style="flex: 1;display: flex;justify-content: center;align-items: center">
    <div class="button" onclick="changeStatus(this)">开始</div>
  </div>
  <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
  <script>
    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
  </script>
  <script src="/public/scripts/io.js"></script>
  <script src="/public/scripts/mobile/dom.js"></script>

</body>

</html>
